<!DOCTYPE html>
<html>
<head>
<title>Connect4</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"
	charset="UTF-8">
<script src="<?php echo base_url(); ?>assets/js/jquery-2.0.3.min.js"></script>
<script src="<?php echo base_url(); ?>assets/js/bootstrap.min.js"></script>
<script src="<?= base_url() ?>assets/js/jquery.timers.js"></script>
<link href="<?php echo base_url(); ?>assets/css/bootstrap.min.css" rel="stylesheet" media="screen">

<style type="text/css">
    #board{
        text-align: center;
    }
    #board tbody{
        background-color: white;
    }

    #board tbody tr{
        height:48px;
    }
    #board td{
        width:48px;
        border:1px solid black;
    }
</style>

<script>
	var otherUser = "<?= $otherUser->login ?>";
	var otherUserId = <?php echo $otherUser->id; ?>;
	var user = "<?= $user->login ?>";
	var userId = <?php echo $user->id; ?>;
	var turnId = <?php echo $turnId; ?>;
	var status = "<?= $status ?>";
	
	var rows = 6;
	var columns = 7;
	var spots = 0;

	var match;
	var board;
	var boardStateCur;
	var boardStateLast;
	var changed;

	$(function(){
		$('[name=conversation]').val("<?php if(isset($conv)) echo $conv; ?>");
		$('body').everyTime(250,function(){
			if(status == 'waiting') {
				$.getJSON('<?= base_url() ?>index.php/arcade/checkInvitation',function(data, text, jqZHR){
					if(data && data.status=='rejected') {
						alert("Sorry, your invitation to play was declined!");
						window.location.href = '<?= base_url() ?>index.php/arcade/index';
					}
					if(data && data.status=='accepted') {
						status = 'playing';
						$('#status').html('Playing ' + otherUser);
					}
				});
			}
	
			var url = "<?= base_url() ?>index.php/board/getMsg";
			$.getJSON(url, function (data,text,jqXHR){
				if(data && data.status=='success') {
					var conversation = $('[name=conversation]').val();
					var msg = data.message;
					if(msg.length > 0)
						$('[name=conversation]').val(conversation + "\n" + otherUser + ": " + msg);
				}
			});

			var url = "<?= base_url() ?>index.php/board/wait";
			$.getJSON(url, function (data,text,jqXHR){
				match_status = <?php echo $match_status; ?>;
				
				boardStateCur = "<?php echo $boardStateCur; ?>";
				boardStateLast = "<?php echo $boardStateLast; ?>";
				user1 = <?php echo $user1; ?>;

				if(data && data.status=='yourTurn') {
					$('button').attr("disabled", false);
					$('#turn').html("Your turn");
					if(match_status == 2 && user1 == userId) {
						alert("You Win! :)");
						window.location.href = '<?= base_url() ?>index.php/board/endGame';
					} else if(match_status == 3 && user1 == userId) {
						alert("You Lose! :(");
						window.location.href = '<?= base_url() ?>index.php/board/endGame';
					} else if(match_status == 2 && user1 == otherUserId) {
						alert("You Lose! :(");
						window.location.href = '<?= base_url() ?>index.php/board/endGame';
					} else if(match_status == 3 && user1 == otherUserId) {
						alert("You Win! :)");
						window.location.href = '<?= base_url() ?>index.php/board/endGame';
					}
						
				} else {
					$('button').attr("disabled", true);
					$('#turn').html(otherUser + "'s turn");
					if(match_status == 2 && user1 == userId) {
						alert("You Win! :)");
						window.location.href = '<?= base_url() ?>index.php/board/endGame';
					} else if(match_status == 3 && user1 == userId) {
						alert("You Lose! :(");
						window.location.href = '<?= base_url() ?>index.php/board/endGame';
					} else if(match_status == 2 && user1 == otherUserId) {
						alert("You Lose! :(");
						window.location.href = '<?= base_url() ?>index.php/board/endGame';
					} else if(match_status == 3 && user1 == otherUserId) {
						alert("You Win! :)");
						window.location.href = '<?= base_url() ?>index.php/board/endGame';
					} 
				}
			});
		});
        		
		$('#form').submit(function(){
			$('#convId').val($('[name=conversation]').val());
			var arguments = $(this).serialize();
			var url = "<?= base_url() ?>index.php/board/postMsg";
			$.post(url,arguments, function (data,textStatus,jqXHR){
				var conversation = $('[name=conversation]').val();
				var msg = $('[name=msg]').val();
				$('[name=conversation]').val(conversation + "\n" + user + ": " + msg);
			});

			return false;
		});		
	});

	function submitForm(id) {
		$('#convId').val($('[name=conversation]').val());
		$('#buttonId').val(id);
		$('button').attr("disabled", true);
	}
</script>

</head> 
<body>  
	<nav class="navbar navbar-default" role="navigation">
		<div class="navbar-inverse">
			<div class="navbar-inner">
				<a class="brand" href="">Connect4</a>
				<p class="navbar-text navbar-right pull-right">Hello <?= $user->fullName() ?> 
					<a href="../account/logout" class="navbar-link">(Logout)</a> 
					<a href="../account/updatePassword" class="navbar-link">(Change Password)</a>
				</p>
			</div>
		</div>
	</nav>
	
	<div class="row offset1">
		<h2>Game Area</h2>
		<div class="offset2">
			<h3 id="turn">&nbsp;</h3>
		</div>
	</div>
	
	<div class="row">
		<div class="span4 offset1">
			<?php
				echo form_open("board/play");
			?>
			<table id="board">
				<thead>
					<tr>
						<?php
							for($i = 0; $i < 7; $i++) {
								echo "<td><button id=\"". $i ."\" type=\"submit\" onClick=\"submitForm(this.id)\">Drop</button></td>";							
							}
						?>
					</tr>
				</thead>
			<tbody>
			<?php 
				for($i = 0; $i < 6; $i++) {
					echo "<tr>";
					for($j = 0; $j < 7; $j++) {
						$str = '';
						if($board[$i][$j] == 0){
							$str =  '';
						}
						else if($board[$i][$j] == 1){
							$str = '<img src="http://localhost/Connect4/assets/images/yellow.jpg" width="48px" height="48px" />';
						}
						else if($board[$i][$j] == 2){
							$str = '<img src="http://localhost/Connect4/assets/images/red.jpg" width="48px" height="48px" />';
						}
							
						echo "<td id=\"" . $i . $j . "\" name=\"" . $i . $j . "\">" . $str . "</td>";
					}
					echo "</tr>";
				}
			?>
			</tbody>
				<input type="hidden" name="buttonId" id="buttonId" value="" />
			</table>
			
			<?php echo form_close(); ?>
		</div>		
		<div class="offset8" id='status'>
			<?php 
				if ($status == "playing")
					echo "Playing " . $otherUser->login;
				else
					echo "Wating on " . $otherUser->login;
			?>
		</div>
			
		<div class="offset8" id='status'>	
			<?php 
				echo form_textarea('conversation', "", "readonly");
				
				$attribute = array('id' => 'form');
				echo form_open("board/index", $attribute);
				echo form_input('msg', "", "onfocus=\"$('#msg').val('')\" id=\"msg\" placeholder=\"\" autofocus=\"autofocus\"");
				echo "<br><input type=\"submit\" class=\"btn btn-primary\" name=\"send\" value=\"Send\"/>";
				echo "<input type=\"hidden\" name=\"convId\" id=\"convId\" value=\"\" />";
				echo form_close();
			?>
		</div>
	</div>
</body>
</html>